<template>
  <div id="forumhome">
    <Topf :is_manager = "user.is_manager" />
    <!-- <Secend /> -->
    <el-container>
      
      <el-aside width="300px" >
        <div class="message_box">
          <div class="userhead">
            <img src="../../assets/images/OIP-C.jpg" >
          </div>
          <div class="username">
            {{user.user_name}}
          </div>
          <div class="bottom_message">
            <span style="border-right:3px solid black; padding-right:20px">
              <div>{{user.following_num}}</div>
              <div>关注数</div>
            </span>
            <span style="border-right:3px solid black; padding-right:20px">
              <div>{{user.fan_num}}</div>
              <div>粉丝数</div>
            </span> 
          </div>
        </div>
      </el-aside>
      <el-main >
       <router-view></router-view>
      </el-main>
      <el-aside width="350px" >
        <div class="right_box">
          <div class="title_input">
            <el-input v-model="theme.title" placeholder="标题..."></el-input>
          </div>
          <div class="contain_input">
            <el-input type="textarea" v-model="theme.contain"  :rows="5" placeholder="内容(请使用html格式发帖哦！！！！）"></el-input>
          </div>
          <div class="_bottom">
            <div class="_icon"> </div>
            <div class="_button">
              <el-button size="medium" round style="margin:10px"  @click="submit">发布</el-button>
            </div>
          </div>
        </div>


      </el-aside>
    </el-container>

    <div class="tips">
      <el-dialog
            title="Tips"
            :visible.sync="showTips"
            width="30%"
            :before-close="push">
            <span>确认发布改帖？！</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="showTips = false">取 消</el-button>
              <el-button type="primary" @click="push">确 定</el-button>
            </span>
          </el-dialog>
    </div>
    <!-- <Tiles /> -->
    <!-- <SecendTiles /> -->

    <!-- <Footer /> -->
    
  </div>
</template>


<script>
import Topf from "../../components/forumHome/Topf";
import {addNewTheme} from "../../api"
export default {
  components: {
    Topf,
    
  },
  data () {
      return {
        user:{},
        head_img:'',
        theme_posts:[],
        contain:[],
        showTips:false,
        theme:{
          title:"",
          contain:""
        },
      }
    },
    created () {
     this.user = JSON.parse(window.localStorage.getItem('user' ))
     console.log(this.user);
    },
    inject:['reload'],
    methods: {
      topost(idx){
        let contain = this.contain
        let temp  = contain[idx].theme_post.theme_post_id
        this.$router.push({
          path: `/post/${temp}`,
        })
      },
      push(){
        let temp = this.user.user_id
        this.showTips = false
        let data  = this.theme
        let that = this
        addNewTheme(data.title,data.contain,temp)
          .then(res => {
            console.log("帖子？",res);
            alert("已经成功发布该帖子！！")
             that.theme.title = ''
             that.theme.contain = ''
          })
        .catch(() => {});

      },
      submit(){
        let data = this.theme
        if(data.title == '' || data.contain == ''){
          alert("标题或者内容不能为空！！！")
        }else{
          this.showTips = true
        }
      }

    }
};
</script>

<style lang="less" scoped>
  .message_box{
    display: flex;
    flex-direction: column;
    margin: 20px;
    background-color: #e4dddd;
    border-radius: 15px;
    position: fixed;
    width: 260px;
    .userhead{
      height: 100px;
      width: 100px;
      margin: 10px;
      margin-left:30px;
      // border: 1px solid black;
      // border-radius: 50%;
      img{
        border-radius: 50%;
      }
    }
    .username{
      width: 120px;
      font-size: 25px;
      margin: 10px;

    }
    .bottom_message{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
  }

  .mian_contain{
    margin: 10px;
    background-color: #e4dddd;
    border-radius: 15px;
  }
  .right_box{
    display: flex;
    background-color: #e4dddd;
    flex-direction: column;
    margin:20px;
    border-radius: 15px;
    position: fixed;
    width: 320px;
    height: 260px;
    .title_input{
      margin: 10px;
    }
    .contain_input{
      margin:10px;
    }
    ._bottom{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      ._icon{
        width:30px;
        height: 30px;
        border: 1px solid black;
        margin: 10px;
        border-radius: 50%;
      }
    }
  }


</style>